<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单选择过滤器</title>
    <!--    引入jquery-->
    <script src="../../js/jquery-3.3.1.js"></script>
</head>
<body>
<!-- 构建表单 -->
<form action="">
    username: <input type="text"> <br>
    <!-- 为了方便，我就让password的也是text文本展示 -->
    password: <input type="text"> <br>
    <!--    disabled:让表单不可以操作-->
    age: <input type="text" value="18" disabled> <br>
    你的爱好：
    <div>
        <input type="checkbox">唱歌 <br>
        <input type="checkbox">跳舞 <br>
        <!-- 默认选中状态 添加checked属性即可  -->
        <input type="checkbox" checked>篮球 <br>
    </div>

    你喜欢玩的游戏：
    <select name="game">
        <option>王者荣耀</option>
        <option selected="selected" >和平精英</option>
        <option>PUBG</option>
        <option>QQ飞车</option>
    </select>
    <!-- 由于可以不用提交数据，所以，可以不需要submit-->
</form>


<script>

    /**
     * 表单选择过滤器，则是对表单的一些属性的状态进行操作
     * 表单常用的标签，就是input，所以也是对input的一些常用属性的状态操作
     * 常用的表单
     *  1.单选框
     *  2.复选框
     *  3.普通input
     */


    /**
     * 1.可用元素过滤器 enabled
     * 可以操作当前选择器中可以使用的元素
     * xxxx：伪选择器
     * $("xxx:enabled" )
     * 需求，将所有的input的默认值是（软件6班）
     * val：设置value属性
     */
    $('input:enabled').val("软件6班")

    /**
     * 2.不可用元素选择器 disabled
     * 操作当前不可用的表单中的元素
     * xxx:伪选择器
     * $("xxx:disabled" )
     * 需求，将所有的不可操作的表单的属性修改默认值(今天是个好日子）
     * val：设置value属性
     */
    $('input:disabled').val("今天是个好日子")


    /**
     * 3.选中过滤器（一般用于单选框或者复选框），匹配所有勾选的元素
     * 选中过滤器，可以匹配所有的勾选的元素
     *  a.单选框
     *  b.复选框
     * 格式： $("xxx:checked" )
     * 需求，将选中复选框字体颜色设置为红色
     * 请注意，这个过滤器不是动态的，如果要动态，还是需要涉及到点击事件
     * 这个过滤器，只能使用已经满足了选中的条件
     * 该过滤器，也可以被input的选中触发，及当选中input的时候非单选框，非复选框，也可以触发
     *
     */

    //注意，jquery的选中过滤器中没有value方法，只有value属性
    let checked_value = $('input:checked')[0].value; //理论上，这里是第一个触发的input
    console.log("checked_value:"+checked_value)

    /**
     * 复选框过滤器 checkbox
     * 格式： $("xxx:checkbox" )
     * checkbox和checked常用来作用于复选框
     */
    let checkbox_value = $('input:checkbox')[0].value;
    console.log("checkbox_value:"+checkbox_value)

    /**
     * 下拉框被选中的元素   $("xxxx:selected")
     * 获取 select 元素中所有被选中的元素。
     * xxxx如何定位，这个选择器，建议越准确越好
     * 比如之前的checkbox和checked过滤器，我们是没有很准确定位的，所以都是取值到相对来说准确的信息
     * 当option出现多个selected的时候，已最后一个selected为准，一般单选框都只有一个selected
     * 注意：当前的过滤器都不是动态的，如果需要动态，依旧是需要借助方法
     */
    let option_value = $('select>option:selected').html()
    console.log("option_value:"+option_value)


</script>
</body>
</html>